<%-- 
    Document   : sysLog
    Created on : 2018-11-1, 0:55:32
    Author     : yaohk
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    pageContext.setAttribute("contextPath", request.getContextPath());
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>系统日志</title>
        <%@include file="/WEB-INF/jspf/layui/top_layui.jspf" %>
    </head>
    <body>
        <script type="text/javascript">
            $("body").mask({
                maskMsg: '<div class="loading_text"><img src="${contextPath}/resources/images/loading_2.gif"/><span>正在初始化，请稍后...</span></div>',
                opacity: 1
            });
            $(function () {
                $("body").mask('hide');
            });
        </script>
        <!--搜素框-->
        <div class="layui-row layui-col-space10" style="margin: 6px 0px 0px 5px;">
            <div class="layui-col-md2">
                <div class="layui-form" lay-filter="*">
                    <select name="result" id="result">
                        <option value="">请选择操作结果</option>
                        <option value="0">成功</option>
                        <option value="1">失败</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-form" lay-filter="*">
                    <select name="type" id="type">
                        <option value="">请选择日志类型</option>
                        <option value="1">系统日志</option>
                        <option value="2">操作日志</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md2">
                <input type="text" name="beginTime" id="beginTime" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md2">
                <input type="text" name="endTime" id="endTime" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md1">
                <button class="layui-btn layui-btn-sm" id="reset" style="height: 36px;"><i class="layui-icon layui-icon-refresh"></i>&nbsp;重&nbsp;&nbsp;置</button>
            </div>

        </div>
        <!--        <div class="layui-form layui-clear" id="search" lay-filter="search" style="margin-top: 10px; height: 38px;">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 5px; width: auto;">操作结果</label>
                        <div class="layui-input-inline">
                            <select name="result" id="result">
                                <option value="">请选择操作结果</option>
                                <option value="0">成功</option>
                                <option value="1">失败</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding:9px 5px; width: auto;">日志类型</label>
                        <div class="layui-input-inline">
                            <select name="type" id="type">
                                <option value="">请选择日志类型</option>
                                <option value="1">系统日志</option>
                                <option value="2">操作日志</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="beginTime" id="beginTime" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" id="endTime" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-sm" id="reset">重置</button>
                        </div>
                    </div>
                </div>-->

        <!--数据表格-->
        <table id="log" lay-filter="syslog" class=""></table>

        <!--日志详情-->
        <div id="syslog_details" style="display: none; margin-top: 20px;">
            <from class="layui-form" id="s">
                <div class="layui-form-item">
                    <label class="layui-form-label">ip地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="ip" autocomplete="off"disabled="disabled" class="layui-input" style="width: 200px;">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">日志描述</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" name="logContent" disabled="disabled" style="width:200px;height: 150px;">${data.ip}</textarea>
                    </div>
                </div>
            </from>
        </div>

        <script type="text/javascript">
            layui.use(['table', 'layer', 'form', 'laydate'], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var laydate = layui.laydate;
                var tableIns = table.render({
                    elem: '#log',
//                    height: 490,
                    url: '${contextPath}/syslog/dataLayui.json', //数据接口,
                    page: {//支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'], //自定义分页布局
                        limits: [5, 10, 20, 30, 50],
                        groups: 5,
                        first: false, //不显示首页和尾页
                        last: false
                    },
//                    page:true,
                    text: {none: '暂无相关数据！'}, //自定义文本，如空数据时的异常提示等。
                    even: true, //隔行背景
//                    size: 'sm',
                    autoSort: false, //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
//                    initSort:{field:'operTime',type:'desc'},
                    where: {//请求参数
                        sort: 'operTime', //排序字段
                        order: 'desc' //排序方式 
                    },
                    cols: [[//
                            {type: 'numbers', fixed: 'left'},
                            {field: 'open', title: '操作', fixed: 'left', align: 'center', width: 100,
                                toolbar: '<div><a href="#" lay-event="edit" title="查看详情"><i class="layui-icon layui-icon-table"></i></a></div>'},
//                            {field: 'id', title: 'ID', sort: true, align: 'center'},
                            {field: 'sysUserAccount', title: '操作者账号', sort: true, align: 'center'},
                            {field: 'logContent', title: '日志描述', align: 'center'},
                            {field: 'operTime', title: '操作时间', width: 180, sort: true, align: 'center',
                                templet: function (d) {
                                    var date = new Date(d.operTime);
                                    return date.toLocaleString();
                                }
                            },
                            {field: 'result', title: '操作结果', align: 'center', sort: true,
                                templet: function (d) {
                                    if (d.result === 0) {
                                        return '成功';
                                    } else {
                                        return '<span style="color: #f00;">失败</span>';
                                    }
                                }
                            },
                            {field: 'type', title: '日志类型', align: 'center', sort: true,
                                templet: function (d) {
                                    if (d.type === 1) {
                                        return '系统日志';
                                    } else if (d.type === 2) {
                                        return '操作日志';
                                    } else {
                                        return "其他";
                                    }
                                }
                            }
                        ]]

                });
                table.on('tool(syslog)', function (obj) {
                    if (obj.event === 'edit') {
                        edit(obj.data);
                    }
                });
                //监听行双击事件
                table.on('rowDouble(syslog)', function (obj) {
                    edit(obj.data);
                });
                //监听排序事件
                table.on('sort(syslog)', function (obj) {
//                    console.log(obj.field); //当前排序的字段名
//                    console.log(obj.type);
                    tableIns.reload({
                        initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                        where: {//请求参数
                            sort: obj.field, //排序字段
                            order: obj.type, //排序方式 
                            type: $('#type').val(),
                            result: $('#result').val(),
                            beginTime: beginTime,
                            endTime: endTime
                        }
                    });
                });
                var beginTime;
                var endTime;
                laydate.render({
                    elem: '#beginTime',
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm',
                    done: function (value, date, endDate) {//控件选择完毕后的回调
                        beginTime = value;
                        search();
                    }
                });
                laydate.render({
                    elem: '#endTime',
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm',
                    done: function (value, date, endDate) {
                        endTime = value;
                        search();
                    }
                });
//                监听select选择
                form.on('select()', function () {
                    search();
                });
//                搜索
                function search() {
                    tableIns.reload({
                        where: {
                            type: $('#type').val(),
                            result: $('#result').val(),
                            beginTime: beginTime,
                            endTime: endTime
                        }
                    });
                }
//                 重置搜索条件
                $('#reset').click(function () {
//                    $('#type').val('');
//                    $('#result').val('');
                    $('#beginTime').val('');
                    $('#endTime').val('');
                    form.val('*', {
                        'type': '',
                        'result': ''
//                        'beginTime': '',
//                        'endTime': ''
                    });
                    tableIns.reload({
                        where: {//请求参数
                            sort: 'operTime', //排序字段
                            order: 'desc' //排序方式 
                        }});
                });
//                查看日志详情
                function edit(data) {
                    $("#syslog_details").find('input').attr('value', data.ip);
                    $("#syslog_details").find('.layui-textarea').val(data.logContent);
                    layer.open({
                        title: '日志详情',
                        area: ['360px', '350px'],
                        scrollbar: false,
                        btn: '取消',
                        type: 1,
                        content: $("#syslog_details")
                    });
                }
            });
            $(document).ajaxError(new jQueryAjaxErrorHandler());
        </script>
    </body>
</html>
